<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style type="text/css">
		body{
			margin:0px;
			padding:0px;
		}
		.top{
			width:100%;
			height:200px;
		}
		.box{
			width:700px;
			height:300px;
			margin:0px auto;
			background:#D3D3D3;
			border-radius:20px;
			position:relative;
		}
		.search{
			margin:0px auto;
			width: 529px;
			padding: 4px 7px;
			font: 16px arial;
			border: 1px solid #cdcdcd;
			border-color: #9a9a9a #cdcdcd #cdcdcd #9a9a9a;
			margin-top: 130px;
			margin-left: 80px;
		}
		.ts{
			width: 526px;
			border:1px black solid;
			background:white;
			position:absolute;
			top: 159px;
			left: 80px;
			display:none;
		}
		.ts table{
			border-collapse: collapse;
			width:100%;
		}
		.ts table tr{
			width:100%;
		}
		.ts table tr:hover{
			background:#D3D3D3;
		}
		</style>
		<script type="text/javascript">
			var data = ["abc","bcd","ab","bc"];
			window.onload = function(){
				var ts = document.getElementById("ts");
				var search = document.getElementById("search");
				var go = document.getElementById("go");
				var n = 0;
				var trs;
				search.addEventListener("keyup",function(e){
					if(e.keyCode != 38 && e.keyCode != 40 && e.keyCode != 13 && this.value != ""){
						n = 0;
						trs = document.getElementsByTagName('tr');
						ts.style.display = "block";
						addts(this.value);
					}
				});
				search.addEventListener("keydown",function(e){
					if(e.keyCode == 38 || e.keyCode == 40){
						search.value = trs[n].innerText;
						trs[n].style.backgroundColor = "#D3D3D3";
						for(var i = 0; i < trs.length; i++){
							if(i != n){
								trs[i].style.backgroundColor = "";
							}
						}
						if(e.keyCode == 38){
							if(n == 0){
								n = trs.length - 1;
							}else{
								n--;
							}
						}else if(e.keyCode == 40){
							if(n == trs.length - 1){
								n = 0;
							}else{
								n++;
							}
						}
					}else if(e.keyCode == 13){
						go.click();
					}
				});
				search.addEventListener("blur", function(){
					document.getElementById("ts").style.display = "none";
				});
				go.addEventListener("click", function(){
					var value = search.value;
					if(value != ""){
						var flag = true;
						for(var i = 0; i < data.length; i++){
							if(data[i] == value){
								flag = false;
								break;
							}
						}
						if(flag)
							data.push(value);
						search.value = "";
					}
				});
			}
			
			function addts(key){
				var ts = document.getElementById("ts_table");
				var content = "";
				var len = data.length;
				var key_len = key.length;
				for(var i = 0; i < data.length; i++){
					var s = data[i];
					var point = s.indexOf(key);
					if(point > -1){
						content += "<tr onmousedown=\"usets(this.childNodes[0].innerText)\"><td>";
						if(point > 0)
							content += s.substring(0, point);
						content += "<b>"+ key +"</b>";
						if(point + key_len < len)
							content += s.substring(point + key_len);
					}
				}
				ts.innerHTML = content;
			}

			function usets(value){
				document.getElementById("search").value = value;
			}
			
			function fireEvent(element, eventType) {
				if(typeof element == "object"){
		        	if(document.createEvent){
		        		var event = document.createEvent("HTMLEvents");
			            event.initEvent(eventType, true, true);
			            element.dispatchEvent(event);
		        	}else{
		        		element.fireEvent('on' + eventType);
		        	}
		        }
		    }
		</script>
	</head>
	<body>
		<div class="top">
		</div>
		<div class="box">
			<input id="search" class="search" />
			<input id="go" type="button" value="查找"/>
			<div id="ts" class="ts">
				<table id="ts_table">
				</table>
			</div>
		</div>
	</body>
</html>